<template>
	<view class="content">
		<view class="header">
			<view class="header-left">
				<image src="/static/close.png" mode="" @tap="close"></image>
				<text>设备检查</text>
			</view>
			<view class="header-right" @click="shangbao">
				<image src="/static/add.png" mode=""></image>
				<text>隐患上报</text>
			</view>
		</view>
		<view class="ipts">
			<!-- 序号 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>序号</text>
				</view>
				<text class="place-class">{{userinfo.id}}</text>
			</view>
			<view class="hengxian"></view>
			<!-- 设备编号 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>阀门编号</text>
				</view>
				<text class="place-class">{{userinfo.number}}</text>
			</view>
			<view class="hengxian"></view>
			<!-- 品牌 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>品牌</text>
				</view>
				<span class="place-class">{{userinfo.brand}}</span>
			</view>
			<view class="hengxian"></view>
			<!-- 型号 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>型号</span>
				</view>
				<span class="place-class">{{userinfo.model}}</span>
			</view>
			<view class="hengxian"></view>
			<!-- 供气压力 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>规格大小</span>
				</view>
				<span class="place-class">{{userinfo.type}}</span>
			</view>
			<view class="hengxian"></view>
			<!-- 投运日期 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>放散数量</span>
				</view>
				<span class="place-class">{{userinfo.branch_num}}</span>
			</view>
			<view class="hengxian"></view>
			<!-- 地址 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>地址</span>
				</view>
				<view class="ding">
					<view class="place-class">{{userinfo.address}}</view>
					<image src="/static/qxsb.png" mode="" @click="tapMap(userinfo.lat,userinfo.long,userinfo.address)"></image>
				</view>
			</view>
		</view>
		<!-- 第二块 -->
		<view class="ipts">
			<!-- 检查项目 -->
			<view class="info-item">
				<view class="info-item-left" style="width: 180rpx;">
					<view class="dot"></view>
					<span>检查项目</span>
				</view>
				<text>
					<!-- <picker @change="bindPickerChange" :value="arrIndex" :range="array"> -->
						<view v-for="(item,index) in array" :key='index' class="uni-input">{{array[index]}}</view>
					<!-- </picker> -->
					<!-- <easySelect class="easySelect" style="width:175rpx;height:100%;color: #0000;font-size: 24rpx;color: #fff;" :options="options1" ref="easySelect" :value="selecValue1" @selectOne="selectOne1"></easySelect> -->
				</text>
			</view>
			<view class="hengxian"></view>
			<!-- 检查结果 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>检查结果</span>
				</view>
				<view class="ding">
					<input style="font-size: 24rpx;color: #999999;" type="text" v-model="resut" placeholder="请填写检查结果" value="" />
					<!-- <image src="/static/code.png" mode=""></image> -->
				</view>
			</view>
			<view class="hengxian"></view>
			<!-- 上传异常照片 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>上传设备照片</span>
				</view>
				<view class="danger-img-box">
					<view class="danger-img" v-if="!img1" @click="changeImg">
						<image src="/static/jiahao.png" mode=""></image>
					</view>
					<view class="danger-img" v-else>
						<image :src="img1" mode="" @tap='seeimg(img1)'></image>
						<view class="updeletes" @tap="updetail4(index)">
							<image src="/static/delete.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="hengxian" v-if="typeName != '阀门'"></view>
			<view class="info-item" v-if="typeName != '阀门'">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>调压器参数复核</span>
				</view>
				<span class="place-class">
					<switch :checked="isChecked" @change="isChecked = !isChecked" style="transform:scale(0.7)" />
				</span>
			</view>
			
			<view class="" v-if="isChecked == true" style="margin-right:10rpx; ">
				<view class="hengxian"></view>
				<view class="info-item" style="padding: 10rpx 30rpx; ">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>切断压力</span>
					</view>
					<view class="ding">
						<input style="font-size: 24rpx;color: #999999" type="text" v-model="extra_param_1" placeholder="" value="" />
						<view style="font-size: 24rpx;color: #999999">Pa</view>
					</view>
					
				</view>
				<view class="hengxian"></view>
				<view class="info-item" style="padding: 10rpx 30rpx;">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>放散压力</span>
					</view>
					<view class="ding">
						<input style="font-size: 24rpx;color: #999999;" type="text" v-model="extra_param_2" placeholder="" value="" />
						<view style="font-size: 24rpx;color: #999999">Pa</view>
					</view>
				</view>
				<view class="hengxian"></view>
				<view class="info-item" style="padding: 10rpx 30rpx;">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>运行压力</span>
					</view>
					<view class="ding">
						<input style="font-size: 24rpx;color: #999999;" type="text" v-model="extra_param_3" placeholder="" value="" />
						<view style="font-size: 24rpx;color: #999999">Pa</view>
					</view>
				</view>
				<view class="hengxian"></view>
				<view class="info-item" style="padding: 10rpx 30rpx;">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>关闭压力</span>
					</view>
					<view class="ding">
						<input style="font-size: 24rpx;color: #999999;" type="text" v-model="extra_param_4" placeholder="" value="" />
						<view style="font-size: 24rpx;color: #999999">Pa</view>
					</view>
				</view>
			</view>


			<view class="hengxian" v-if="typeName != '阀门'"></view>
			<!-- <view class="info-item" v-if="typeName != '阀门'">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>关闭压测试</span>
				</view>
				<span class="place-class">
					<switch :checked="isChecked1" @change="isChecked1 = !isChecked1" style="transform:scale(0.7)" />
				</span>
			</view> -->
			<!-- <view class="hengxian"></view> -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>备注</span>
				</view>
				<span class="place-class">添加备注</span>
			</view>
			<view class="supplement">
				<view class="explain">
					<textarea v-model="areaRes" maxlength="200" auto-height @input="textChange" class="textArea" value="" placeholder="请补充说明您的需求" />
					</view>
				<view class="suppBottom">
					<view class="danger-img-box">
					</view>
					<view class="num">
						<view class="">{{textNumber}}/200</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="btn">立即登录</view> -->
		<view class="btns">
			<view class="btn1 consel">取消</view>
			<view class="btn1 save" @click="resultSubmint">保存</view>
		</view>
	</view>
</template>

<script> 
	import easySelect from '@/components/easy-select/easy-select'
	export default { 
		components: {
			easySelect
		},
		data() {
			return {
				isChecked:false,
				isChecked1:false,
				showR:true,
				username: '',
				password: '',
				// array: ['安装工','检测工','维修工'],
				index: 0,
				userinfo:{},
				value:'',  //搜索关键词
				installList:[],  //安装列表
				dosearch:false,
				showAcount:false,
				img1: '',
				textNumber: 0,
				token: '',
				checkId: '',
				// 上传照片
				fileImg: '',
				// 检查项目
				project: '',
				// 检查结果
				resut: '',
				// 备注
				areaRes: '',
				typeName: '',
				task_id: '',
				extra: '',
				// extra_2: '',
				extra_param_1:'',
				extra_param_2:'',
				extra_param_3:'',
				extra_param_4:'',
				array: [],
				arrIndex: 0,
				arrValues: '',
				selecValue1:'' ,//检查项目
				index:1,
				equipment_id:'',
				danger_id:''
			};
		},
		onLoad(option) {
			this.equipment_id= option.equipment_id
			this.typeName = option.name
			this.checkId = option.id
			this.task_id = option.task_id
			this.danger_id = option.danger_id
		},
		onShow() {
			uni.getStorage({
				key: 'token'
			}).then(da => {
				this.token = da[1].data
				this.getArray()
			})
		/* 	setTimeout(() => {
				this.getInstallDetail()
				this.getArray()
			},10) */
		},
		//下拉刷新
		// onPullDownRefresh(){
		// 	this.page=1
		// 	 setTimeout(function() {
		// 	 	uni.stopPullDownRefresh();
		// 	 }, 500);
		// 	this.getInstallDetail()
		// },
		// onReachBottom() {
		// 	this.page++
		// 	this.getInstallDetail()
		// },
		methods: {
			//删除照片
			updetail4(){
				this.img1=''
			},
			//图片预览
			seeimg(img){
				uni.previewImage({
					urls: [img],
					longPressActions: {
						itemList: [],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			
			tapMap(lat,long,address){
				console.log(lat)
				console.log(long)
				console.log(address)
				uni.navigateTo({
					url: '/pages/safety/maps/maps?lat=' + lat + '&long=' + long + '&address=' + address
				})
			},
			bindPickerChange(e,index) {
				console.log('jjjjj',e)
				console.log('oooo',this.index)
				this.arrIndex = e.detail.value
				console.log('检查结果',this.arrIndex)
				this.arrValues = this.array[e.detail.value]
				console.log('fggggggggggg',this.arrValues) 						 
			},
			async getArray() {
				let that = this
				if(that.typeName == '阀门'){
					const res = await that.$request.request({
						url: 'common/valve_options',
						method: 'POST',
						data: {
							token: that.token
						}
					})
					that.array = res.data.data.map(a => a.label);
					
					
					that.$request.request({
						url: 'common/valve_info',
						method:'POST',
						data: {
							token: that.token,
							valve_id: that.equipment_id
						}
					}).then(res => {
						if(res.data.code == 1) {
							that.userinfo = res.data.data
						}
					})
				}
				if(that.typeName == '调压箱'){
					const res = await that.$request.request({
						url: 'common/box_options',
						method: 'POST',
						data: {
							token: that.token
						}
					})
					that.array = res.data.data.map(a => a.label);
					
					
					that.$request.request({
						url: 'common/box_info',
						method:'POST',
						data: {
							token: that.token,
							box_id: that.equipment_id
						}
					}).then(res => {
						if(res.data.code == 1) {
							that.userinfo = res.data.data
						}
					})
					
					
				}
			},
			selectOne1(option) {
				this.selecValue1 = option.label
			},
			close(){
				uni.navigateTo({
					url:'../index/index'
				})
			},
			textChange(e) {
				if(e.detail.cursor >= 200) {
					uni.showToast({
						title: '最多可以输入200个字',
						icon: 'none'
					})
				}
				this.textNumber = e.detail.cursor
			},
			changeImg(ret) {
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						// that.img1 = res.tempFilePaths[0]
						uni.uploadFile({
							url: that.$fileImg + '/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData:{
								token: that.token
							},
							success(res1) {
								let dataPath = JSON.parse(res1.data)
								if(dataPath.code == 1) {
									that.fileImg = dataPath.data.url
									that.img1 = res.tempFilePaths[0]
									
								}
							}
						});
					}
				});
			},
			showRecord(){
				this.showR = !this.showR 
			},
			searchFocus(){
				this.showAcount=false
			},
			infoClick(){
				this.showAcount=!this.showAcount
			},
			// 退出登录
			logOut(){
				uni.clearStorage({
					key:'logininfo',
					success:()=>{
						this.showAcount=false
						uni.redirectTo({
							url: '../../login/login'
						})
					}
				})
			},
			// 跳转至记录页面
			toJiLu(){
				uni.navigateTo({
					url:'./jilu'
				})
			},
			// 跳转用户信息页面
			toCaiLiao(id){
				uni.navigateTo({
					url:'../userinfo/uninstall?id='+id
				})
			},
			// 点击获取安装数据
			searchUser(val){
				// this.getInstallDetail ()
				this.dosearch=true
				uni.navigateTo({
					url:'../query/query?key='+val
				})
			},
			// 获取安装数据
			getInstallDetail () {
				/* let that = this
				that.$request.request({
					url: 'common/valve_info',
					method:'POST',
					data: {
						token: that.token,
						valve_id: that.checkId
					}
				}).then(res => {
					if(res.data.code == 1) {
						that.userinfo = res.data.data
					}
				}) */
			 },
			 resultSubmint() {
				 let that = this
				 if(that.typeName == '阀门'){
					 that.extra = ''
					 // that.extra_2 = ''
				 }else{
					 if(that.isChecked != false) {
						 that.extra = 1
					 }else{
						  that.extra = 0
					 }
					 
					 // if(that.isChecked1 != false) {
					 // 	that.extra_2 = 22
					 // }
				 }
				 if(that.selecValue1 == '请选择') {
				 	 uni.showToast({
				 		 title: '请选择检查项目',
				 		 icon: 'none'
				 	 })
				 	 return
				 }
				 if(that.resut == '') {
					 uni.showToast({
						 title: '请填写检查结果',
						 icon: 'none'
					 })
					 return
				 }
				 if(that.fileImg == '') {
					 uni.showToast({
						 title: '请上传异常照片',
						 icon: 'none'
					 })
					 return
				 }
				 if(that.areaRes == '') {
					 uni.showToast({
						 title: '请补充说明您的要求',
						 icon: 'none'
					 })
					 return
				 }
				 if(that.isChecked == true){
					 if(this.extra_param_1 ==''){
						 uni.showToast({
						 		title: '请填写切断压力',
						 		icon: 'none'
						 })
						 return
					 }
					 if(this.extra_param_2 ==''){
					 	 uni.showToast({
					 		title: '请填写放散压力',
					 			icon: 'none'
					 		 })
					 		 return
					 }
					 if(this.extra_param_3 ==''){
					 		 uni.showToast({
					 			title: '请填写运行压力',
					 				icon: 'none'
					 			 })
					 			 return
					 }
					 if(this.extra_param_4 ==''){
					 			 uni.showToast({
									title: '请填写关闭压力',
					 					icon: 'none'
					 			})
					 			 return
					 }
				 }
				 that.$request.request({
					 url: '/staff/check_upload',
					 method: 'POST',
					 data: {
						 token: that.token,
						 id: that.checkId,
						 task_id: that.task_id,
						 check_position:that.arrIndex,
						 check_result: that.resut,
						 desc: that.areaRes,
						 image: that.fileImg,
						 extra: that.extra,
						 extra_param_1 : that.extra_param_1,
						 extra_param_2 : that.extra_param_2,
						 extra_param_3 : that.extra_param_3,
						 extra_param_4 : that.extra_param_4,
						 danger_id:this.danger_id
					 }
				 }).then(res => {
					 
					 if(res.data.code == 1) {
						 uni.showToast({
						 	title: res.data.msg,
							icon: 'none'
						 })
						// setTimeout(() => {
						// 	uni.navigateTo({
						// 		url:'/pages/install_worker/IMEICheck/IMEICheck3'
						// 	})
						// },300)
					 }else{
						 uni.showToast({
						 	title: res.data.msg,
						 	icon: 'none'
						 })
					 }
				 })
			 },
			 shangbao() {
				 uni.navigateTo({
				 	url: '../securityCheck/dangerReport?equipment_type=' + this.typeName + '&type=' + '6' + '&equipment_id=' + this.equipment_id+'&id=' +this.checkId + '&name=' + this.typeName + '&task_id=' + this.task_id
				 })
			 }
		},
		
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
		// padding-bottom: 200rpx;
		// margin-bottom: 150rpx;
	}
	.content{
		position:relative;
		padding-bottom: 140rpx;
	}
	// header
	.header{
		display: flex;
		justify-content:space-between;
		align-items: center;
		padding: 30rpx 30rpx;
		background-color: #fff;
		.header-left{
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			image{
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}
		}
		.header-right{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #333;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}
	.header1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		height: 80rpx;
		width: 100%;
		background-color: #003690;
		padding: 0 40rpx;
		.ipt-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20rpx;
			width: 514rpx;
			height: 52rpx;
			background-color: #fff;
			border-radius: 24rpx;
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.header1-right{
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #E2ECFB;
			image{
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
	.danger-img{
		position: relative;
						
		.updeletes{
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 88;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.plac-class{
		font-size: 32rpx;
		color: #999;
	}
	.ipts{
		background-color: #fff;
		margin-top: 30rpx;
	}
	.info-item{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// height: 72rpx;
		width: 100%;
		padding: 10rpx 30rpx;
		background-color: #fff;
		font-size: 24rpx;
		color: #333;
		.ding{
			display: flex;
			align-items: center;
		}
		image{
			width: 40rpx;
			height: 40rpx;
		}
		input{
			flex: 1;
			text-align: right;
		}
		.dot{
			width: 8rpx;
			height: 8rpx;
			background-color: #003690;
			border-radius: 50%;
			margin-right: 10rpx;
		}
		.danger-img{
			width: 75rpx;
			height: 75rpx;
			// border: 2rpx dashed #eee;
			margin-right: 10rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.danger-img-box{
			display: flex;
		}
		
		.info-item-left{
			display: flex;
			align-items: center;
			font-size: 32rpx;
		}
	}
	.hengxian{
		width: 700rpx;
		height: 2rpx;
		background-color:  #eee;
		margin: 20rpx auto;
	}
	.place-class{
		font-size: 26rpx;
		color: #999;
	}
	.btn{
		width: 646rpx;
		height: 80rpx;
		margin: 74rpx auto;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-image: linear-gradient(to bottom, #2366D5, #001B48);
		font-size: 32rpx;
		color: #E5EFFE;
	}
	.btns{
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;
		.btn1{
			width: 50%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 24rpx;
		}
		.consel{
			background-color: #e9e9e9;
			color: #777;
		}
		.save{
			background-color: #003690;
			color: #fff;
		}
	}
	.btn:active{
		background: rgba(0,0,0,0.4);
	}
	.record{
		display: flex;
		align-items: center;
		color: #003690;
		font-size: 32rpx;
		margin-top: 20rpx;
		image{
			width: 32rpx;
			height: 32rpx;
			margin: 0 20rpx 0 30rpx;
		}
		span{
			font-weight: 700;
		}
	}
	.record-item{
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		border-bottom: 2rpx solid #eee;
		.record-item-left{
			display: flex;
			align-items: center;
			.shu{
				width: 8rpx;
				height: 28rpx;
				background-color: #003690;
				border-radius: 8rpx;
			}
			.title{
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				margin: 0 10rpx;
			}
			.time{
				font-size: 24rpx;
				color: #777;
			}
		}
		.record-item-right{
			display: flex;
			align-items: center;
			.dianhua{
				width: 28rpx;
				height: 28rpx;
			}
			.zhankai{
				width: 36rpx;
				height: 36rpx;
			}
			.title{
				font-size: 32rpx;
				color: #555;
				font-weight: 500;
				margin: 0 10rpx;
			}
		}
	}
	.supplement{
		margin: 20rpx 24rpx;
		background-color: #fff;
		position: relative;
		overflow: hidden;
		.explain{
			.textArea{
				min-height: 142rpx;
				padding: 14rpx 30rpx;
				font-size: 32rpx;
				text-align: left;
				color: rgba(187,187,187,0.84);
			}
		}
		.suppBottom{
			.danger-img{
				position: relative;
				margin-left: 50rpx;
				margin-bottom: 0rpx;
				width: 68rpx;
				height: 68rpx;
				float: left;
				image{
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
				}
			}
			.num{
				float: right;
				margin-right: 26rpx;
			}
		}
	}
</style>
